import { Component } from "react";
import {
  Button,
  Cell,
  Empty,
  Avatar,
  Grid,
  Image,
} from "@nutui/nutui-react-taro";
import styles from "./index.scss";
import { useModel } from "@/store";
import Taro from "@tarojs/taro";
import { OpenData } from "@tarojs/components";
import guahao from "@/assets/svg/guahao.svg";
import jiaofei from "@/assets/svg/jiaofei.svg";
import baogao from "@/assets/svg/baogao.svg";
import chaxun from "@/assets/svg/chaxun.svg";
import tijian from "@/assets/svg/tijian.svg";
import { IconFont } from "@nutui/icons-react-taro";
import Layout from "@/components/Layout";
import { idNoMask } from "@/utils/str";
import MedicalCard from "./components/MedicalCard";
import PatientInfo from "./components/PatientInfo";
import MenuBlock from "./components/MenuBlock";
import logo from "@/assets/logo.jpg";

export default () => {
  const hospitalName = HOSPITALNAME;
  const ver = VERSION_;

  const { user, getUser } = useModel("user");
  const { curPatientInfo,patientList } = useModel("patient");

  const isEmpty = false;

  const toAddPatient = () => {
    Taro.navigateTo({ url: "/pages/addPatient/index" });
  };
  const toChangePatinet = () => {
    Taro.navigateTo({ url: "/pages/changePatient/index" });
  };
  const menuList = [
    {
      text: "预约挂号",
      icon: guahao,
      url: "/pages/register/index/index",
    },
    {
      text: "门诊缴费",
      icon: jiaofei,
      url: "/pages/payment/index/index",
    },

    {
      text: "费用查询",
      icon: chaxun,
      url: "/pages/inquiry/index/index",
    },

    {
      text: "报告查询",
      icon: baogao,
      url: "/pages/report/index/index",
    },
    {
      text: "体检报告",
      icon: tijian,
      url: "/pages/webView/index",
    },
    
    // {
    //   text: "挂号记录",
    //   icon: baogao,
    //   url: "/pages/register/registerHistory/index",
    // },
  ];

  return (
    <Layout title={hospitalName}>
      <view className={styles.homeWarp}>
      
     
<view className={styles.topBackground}></view>
<image src={logo} style={{ width: '100%', height: '216rpx',zIndex:200 }}></image>
        <view className={styles.topCardWarp}>
          <view className={styles.topCard}>
            <view className={styles.content}>
              {curPatientInfo?.patientId ? (
                <view className={styles.userInfo}>
                  <view className={styles.avatar}>
                    <OpenData type="userAvatarUrl" />
                    {/* <Avatar
                    size="normal"
                    src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
                  /> */}
                  </view>
                  <view style={{ marginLeft: "20rpx" }}>
                    <view> 就诊人：{curPatientInfo?.patientName}</view>
                    <view style={{ marginTop: "20rpx" }}>
                  
                      身份证：{idNoMask(curPatientInfo?.idNo)}
                    </view>
                  </view>
                </view>
              ) : (
                <Empty imageSize={50} description={"暂未添加就诊人"}></Empty>
              )}
            </view>
            <view className={styles.bottom}>
              {!curPatientInfo?.patientId &&
                <text onClick={() => toAddPatient()}>添加就诊人</text>
             }
               {patientList?.length>0&& <text onClick={() => toChangePatinet()} style={{marginLeft:20}}>切换就诊人</text>}
          
            </view>
          </view>
        </view>
       
        {/* <MedicalCard patient={curPatientInfo}>
        <PatientInfo patient={curPatientInfo} />
      </MedicalCard> */}

        {/* <MenuBlock /> */}

        <view className={styles.menuWarp}>
          <view className={styles.title}>门诊服务</view>
          <view>
            <Grid columns={3} square>
              {menuList.map((item, index) => {
                return (
                  <Grid.Item
                    key={index}
                    text={item.text}
                    onClick={() => {
                      if (!curPatientInfo?.patientId) {
                        Taro.showToast({
                          title: "请先绑定就诊人",
                          icon: "none",
                        });
                        return;
                      }

                      if (item.url ) {
                        Taro.navigateTo({ url: item.url });
                        return;
                      }

                      Taro.showToast({
                        title: "功能暂未开放,开发中",
                        icon: "none",

                      });
                      
                    }}
                  >
                    <IconFont name={item.icon} size="36" />
                  </Grid.Item>
                );
              })}
            </Grid>
          </view>
        </view>

        <view style={{ position: 'absolute', bottom: '3em', left: '0', width: '100vw', textAlign: 'center', opacity: .3 }}>
        <view style={{ color: '#000', fontSize: '1em' }}>{ hospitalName }</view>
        <view style={{ color: '#000', fontSize: '.8em' }}>{ ver }</view>
      </view>

        {/* <div className={styles["index"]}>
        欢迎使用 NutUI React 开发 Taro 多端项目。
      </div>
      <div className={styles["index"]}>
        <Button type="primary" className="btn">
          NutUI React Button
        </Button>
      </div> */}
      </view>
     </Layout>
  );
};
